// Forms
//
// Find the dashboard form styling here.
//
// Styleguide 5.

@use "sass:math";

form {
    ul,
    ol {
        @include list-reset;
    }
}

// Form Layout
//
// Here's how to build a basic form group. The three important classes are the `form-group` class on the wrapper
// around the entire form field, the `label-wrap` class on the wrapper around the label, and the `input-wrap` class
// on the wrapper around the from input.
//
// PHP rendering: If you use Gdn_Form `simple()` to render your forms, the markup will render like this.
// Otherwise, you'll have to add the wrapper classes manually and/or by using the help of the `*Wrap()`
// functions in Gdn_Form that will add the `label-wrap` div or `input-wrap` div to a field.
//
// Styleguide 5.1.

// Basic Form Layout
//
// Here's an example of a basic form layout. If you have other plans for your label element, you can mimic a label by
// adding the `label` class to a div around your fake label. Accessibility matters, though. Don't forget to add
// appropriate aria-label or aria-labelledby attributes in these cases.
//
// Markup:
// <form>
//   <ul>
//     <li class="form-group">
//       <div class="label-wrap">
//          <label for="fieldID1">Label</label>
//          <div class="info">
//            Here's some info text for this field.
//          </div>
//       </div>
//       <div class="input-wrap">
//         <input type="text" id="fieldID1" class="form-control" />
//       </div>
//     </li>
//     <li class="form-group">
//       <div class="label-wrap">
//          <div class="label" id="fieldID2-label">Another (fake) Label</div>
//       </div>
//       <div class="input-wrap">
//         <input type="text" id="fieldID2" aria-labelledby="fieldID2-label" class="form-control" />
//       </div>
//     </li>
//   </ul>
// </form>
//
// Styleguide 5.1.1.

// Form Layout Variants
//
// This example showcases a few examples that illustrate how you can play with some variants on the default.
//
// Markup:
// <form>
//   <ul>
//     <li class="form-group">
//       <div class="label-wrap">
//          <label for="fieldID1">Normal label and form input</label>
//          <div class="info">
//            Here's some info text for this field. I'm giving a little description of what this field
//            does and how it affects the user.
//          </div>
//       </div>
//       <div class="input-wrap">
//         <input type="text" id="fieldID1" class="form-control" />
//       </div>
//     </li>
//     <li class="form-group">
//       <div class="label-wrap-wide">
//          <label for="fieldID2">
//            Wide label and narrow form input, useful for small text inputs or toggles
//          </label>
//          <div class="info">
//            Here's some info text for this field. I'm giving a little description of what this field
//            does and how it affects the user.
//          </div>
//       </div>
//       <div class="input-wrap-right">
//         <input type="text" id="fieldID2" class="form-control" />
//       </div>
//     </li>
//     <li class="form-group">
//       <div class="input-wrap no-label">
//         <input type="text" id="fieldID3" class="form-control" placeholder="No Label"/>
//       </div>
//     </li>
//   </ul>
// </form>
//
// Styleguide 5.1.2.

.form-group {
    @extend .row;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-bottom: 0;
    border-bottom: $border-width solid #d8d8d8;

    > .no-grid {
        padding-left: $padding-row;
        padding-right: $padding-row;
    }

    > .input-wrap {
        @extend .col-sm-10;
        @extend .col-xs-24;

        &.no-label {
            @extend .col-sm-offset-10;
            @extend .col-xs-offset-0;
        }
    }

    > .label-wrap {
        @extend .col-sm-14;
        @extend .col-xs-24;
    }

    > .label-wrap-wide {
        @extend .col-sm-10;
        @extend .col-xs-12;
        flex-grow: 1;

        & .info {
            max-width: 80ch;
        }
    }

    .input-wrap-right {
        padding-left: $padding-row;
        padding-right: $padding-row;
    }

    @include media-breakpoint-down(xs) {
        flex-wrap: wrap;
        .input-wrap {
            margin-top: $spacer * 0.25;
            max-width: 100%;
        }
    }

    .dashboard-main & {
        margin-bottom: 0;
    }

    &.formGroup-checkBox .input-wrap {
        @extend .col-sm-14;
        @extend .col-xs-24;
    }

    &.formGroup-upload {
        align-items: center;

        & img {
            max-width: 100%;
        }
    }

    &.formGroup-richeditor {
        display: block;
    }
}

// Radio and Checkbox Groups
//
// If you have a form field with multiple options, you can display them inline, or stacked.
//
// .inline - Displays input inline.
//
// Markup:
// <form>
//   <ul>
//     <li class="form-group">
//       <div class="label-wrap">
//          <label>Checkbox field with multiple options</label>
//          <div class="info">Info text for field</div>
//       </div>
//       <div class="input-wrap {{modifier_class}}">
//         <label><input type="checkbox" id="fieldID1" class="form-control">Option One</label>
//         <label><input type="checkbox" id="fieldID2" class="form-control">Option Two</label>
//         <label><input type="checkbox" id="fieldID3" class="form-control">Option Three</label>
//       </div>
//     </li>
//   </ul>
// </form>
//
// Styleguide 5.1.3.

label,
.label {
    font-weight: 600;
    margin-bottom: 0;
}

.input-wrap {
    input,
    .SelectOne__single-value,
    .SelectOne__placeholder {
        font-size: 14px;

        @media (max-width: 600px) {
            font-size: 16px;
        }
    }

    &:not(.inline) label {
        display: block;
    }
    &.inline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        label {
            margin-right: $spacer * 0.25;
        }
    }
    &.grid {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;

        label {
            margin-top: 0;
            flex-basis: 50%;
            display: block !important;

            @include media-breakpoint-down(xs) {
                flex-basis: 100%;
                margin-top: $spacer * 0.5;
            }
        }
        label:nth-child(n + 3) {
            margin-top: $spacer * 0.5;
        }
        label:nth-child(odd) {
            padding-right: $spacer * 0.5;

            @include media-breakpoint-down(xs) {
                padding-right: initial;
            }
        }
        span {
            white-space: normal;
        }
    }
}

.form-control {
    line-height: 1.5;
    padding-top: ($control-height - ($border-width * 2) - ($font-size-base * $line-height)) * 0.5;
    padding-bottom: ($control-height - ($border-width * 2) - ($font-size-base * $line-height)) * 0.5;
    border: $border-width solid #ccc;
}

.form-footer {
    display: flex;
    justify-content: flex-end;
    padding: $spacer 0;
}

.label-wrap {
    min-width: 0;
    overflow: hidden;

    img {
        @extend .padded;
        max-width: 50%;
        max-height: 180px; // Something sane.
    }
}

// For cases where there are form groups in input-wraps (see Ranks add/edit form)
.input-wrap > .form-group {
    border: 0;
    padding-top: 0;
    padding-bottom: $spacer;
    margin-left: 0;
    margin-right: 0;

    &:last-child {
        padding-bottom: 0;
    }

    > * {
        padding-left: 0;
    }
}

// Input Groups (input-wrap-multiple)
//
// .input-wrap-multiple also works for other types of inputs. By default the inputs will take the same amount of space on the row.
//
// .input-wrap-1_3 - The first element will take 1/3 and the second 2/3 (only meant when there are 2 elements on row)
// .input-wrap-2_3 - The first element will take 2/3 and the second 1/3 (only meant when there are 2 elements on row)
//
// Markup:
// <form>
//   <ul>
//     <li class="form-group">
//       <div class="label-wrap">
//          <label>Checkbox field with multiple options</label>
//          <div class="info">Info text for field</div>
//       </div>
//       <div class="input-wrap input-wrap-multiple {{modifier_class}}">
//         <input type="number" value="0" min="0" class="form-control">
//          <select class="form-control">
//           <option value="hours">hours</option>
//           <option value="days">days</option>
//           <option value="weeks">weeks</option>
//           <option value="months">months</option>
//         </select>
//       </div>
//     </li>
//   </ul>
// </form>
//
// Styleguide 5.1.4.

.input-wrap-multiple {
    display: flex;

    > *:not(:first-child) {
        margin-left: $spacer * 0.5;
    }

    // Handles case where you want the first element to take 1/3 and the other 2/3
    &.input-wrap-1_3 {
        > * {
            width: #{math.div(100% * 2, 3)};
        }

        > *:first-child {
            width: #{math.div(100%, 3)};
        }
    }

    // Handles case where you want the first element to take 2/3 and the other 1/3
    &.input-wrap-2_3 {
        > * {
            width: #{math.div(100%, 3)};
        }

        > *:first-child {
            width: #{math.div(100% * 2, 3)};
        }
    }
}

// Toggles
//
// Toggles can either be a checkbox form element or an anchor.
//
// Styleguide 5.2.

// Anchor Toggle
//
// Here's how to build an anchor toggle.
//
// .toggle-wrap-on - On state.
//
// Markup:
// <div class="toggle-wrap {{modifier_class}}">
//   <a>
//     <div class="toggle-well"></div>
//     <div class="toggle-slider"></div>
//   </a>
// </div>
//
// Styleguide 5.2.1.

.toggle-wrap {
    @include toggle($toggle-height, $toggle-padding);
}

.toggle-box-label-wrap {
    padding-left: $padding-row;
}

.toggle-wrap-sm {
    @include toggle($toggle-height-sm, $toggle-padding-sm);
}

// Checkbox Toggle
//
// Here's how to build an checkbox toggle.
//
// PHP rendering: The toggle() function in Gdn_Form. Also supported in simple().
//
// Markup:
// <div class="toggle-wrap">
//   <input id="toggle-checkbox" type="checkbox" class="toggle-input" />
//   <label for="toggle-checkbox"></label>
// </div>
//
// Styleguide 5.2.2.

.toggle-wrap {
    label {
        display: inline;
    }

    input[type="checkbox"] {
        position: absolute;
        margin-left: -9999px;
        visibility: hidden;

        + label {
            &::before,
            &::after {
                content: "";
            }

            &::before {
                @extend .toggle-well;
            }

            &::after {
                @extend .toggle-slider;
            }
        }
    }

    // When checked, move and change background color
    input[type="checkbox"]:checked + label::before {
        @extend .toggle-well-on;
    }

    input[type="checkbox"]:checked + label::after {
        @extend .toggle-slider-on;
    }
}

// Color Pickers
//
// Color pickers provide an interface for the user to choose a color.
//
// Markup:
// <div class="js-color-picker color-picker ">
//   <input type="text" class="js-color-picker-value color-picker-value hidden" />
//   <input type="text" class="js-color-picker-text color-picker-text form-control" />
//   <span class="js-color-picker-preview color-picker-preview"></span>
//   <input type="color" class="js-color-picker-color color-picker-color" />
// </div>
//
// Styleguide 5.4

.color-picker {
    position: relative;
    @extend .input-wrap;
}

// Hide the html color input
.color-picker-color {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    padding: 0;

    &:disabled {
        opacity: 0;
    }
}

.color-picker-preview {
    position: absolute;
    top: $spacer * 0.25;
    right: ($spacer * 0.25) + $border-width;
    width: 28px;
    height: 32px - ($spacer * 0.25);
    background: $black;
    border: $border-width solid $border-color;
    cursor: pointer;
}

// File Upload
//
// Input for a file upload.
//
// Markup:
// <label class="file-upload">
//   <input type="file" name="Logo" id="Form_Logo" class=" js-file-upload form-control">
//   <span class="file-upload-choose">Choose</span>
//   <span class="file-upload-browse">Browse</span>
// </label>
//
// Styleguide 5.5.

.file-upload {
    position: relative;
    display: inline-block;
    width: 100%;
    font-weight: normal;
    cursor: pointer;

    input {
        margin: 0;
        filter: alpha(opacity = 0);
        opacity: 0;

        &:disabled,
        &.disabled {
            opacity: 0;
        }
    }
}

.file-upload-choose {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding: $control-padding-y $spacer * 3 * 0.25;
    color: $input-color;
    border: $input-btn-border-width solid $input-border-color;
    border-radius: $border-radius;
    white-space: nowrap;
    overflow: hidden;
}

.file-upload-browse {
    position: absolute;
    top: 0;
    right: 0;
    @extend .btn;
    @extend .btn-secondary;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

// Focus state
.file-upload input:focus,
.file-upload input:hover {
    ~ .file-upload-choose,
    ~ .file-upload-browse {
        border-color: #66afe9;
        outline: none;
        @extend .active;
    }
}

//Disabled state
.file-upload input:disabled,
.file-upload input.disabled {
    ~ .file-upload-choose {
        background-color: $grey-lighter;
    }
}

// Select
//
// Includes IE9-specific hacks (noted by ` \9`).
select,
select.form-control {
    display: inline-block;
    height: $control-height;
    max-width: 100%;
    padding-right: 32px;
    padding-left: 12px;

    color: $input-color;
    vertical-align: middle;

    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-image: url();
    background-image: none \9;
    background-size: 8px 10px;

    border: $input-btn-border-width solid $input-border-color;
    border-radius: $border-radius;

    // Use vendor prefixes as `appearance` isn't part of the CSS spec.
    -moz-appearance: none;
    -webkit-appearance: none;

    // Hides the default caret in IE11
    &::-ms-expand {
        opacity: 0;
    }

    &:focus {
        border-color: #66afe9;
        outline: none;
        @extend .active;
    }
}

select + select {
    margin-left: $spacer * 0.5;
}

// Label Selectors
//
// Label selectors replace checkboxes and radios with a image and/or text selector.
//
// Markup:
// <form>
// <ul class="label-selector">
//   <li class="label-selector-item">
//     <input type="radio" id="babySeal" name="babyAnimals" class="label-selector-input">
//     <label for="babySeal">
//       <div class="image-wrap">
//         <img class="label-selector-image" src="./public/resources/images/baby-seal.jpg" alt="Baby Seal">
//         <div class="overlay">
//           <div class="buttons">
//             <div class="btn btn-overlay">Button</div>
//           </div>
//           <div class="selected">
//             <svg class="icon icon-svg icon-svg-checkmark" viewBox="0 0 17 17">
//               <use xlink:href="#checkmark" />
//             </svg>
//           </div>
//         </div>
//       </div>
//       <div class="title">Baby Seal</div>
//       <div class="info">by Author</div>
//       <div class="description">Choose this happy baby seal. It's so very happy.</div>
//     </label>
//   </li>
//   <li class="label-selector-item">
//     <input type="radio" id="puppy" name="babyAnimals" class="label-selector-input">
//     <label for="puppy">
//       <div class="image-wrap">
//         <img class="label-selector-image" src="./public/resources/images/puppy.jpg" alt="Puppy">
//         <div class="overlay">
//           <div class="buttons">
//             <div class="btn btn-overlay">Button</div>
//           </div>
//           <div class="selected">
//             <svg class="icon icon-svg icon-svg-checkmark" viewBox="0 0 17 17">
//               <use xlink:href="#checkmark" />
//             </svg>
//           </div>
//         </div>
//       </div>
//       <div class="title">Puppy</div>
//       <div class="info">by Author</div>
//       <div class="description">Choose this sleepy puppy. Sooo tired, puppy.</div>
//     </label>
//   </li>
// </ul>
// </form>
//
// Styleguide 5.6.

.label-selector {
    @extend .row;
    @include list-reset;
    margin-bottom: $spacer * 0.5;

    label {
        padding-left: 0;
        cursor: pointer;
    }

    input[type="radio"],
    input[type="checkbox"] {
        position: absolute;
        opacity: 0;
    }

    .active,
    input[type="radio"]:checked ~ label,
    input[type="radio"]:checked ~ label,
    input[type="checkbox"]:checked ~ label,
    input[type="checkbox"]:checked ~ label {
        cursor: default;

        .overlay {
            opacity: 1;
            background-color: rgba(255, 255, 255, 0.7);

            > .buttons {
                display: none;
            }

            > .selected {
                display: block;
            }
        }

        .label-selector-image {
            opacity: 0.5;
        }
    }

    .label-selector-image {
        display: block;
        width: 100%;
    }

    .title {
        text-align: center;
        font-weight: 600;

        a {
            @include reverse-link();

            &:hover {
                text-decoration: none;
            }
        }
    }

    .image-wrap {
        position: relative;
        display: block;
        margin-bottom: $spacer * 0.5;
        @include image-wrap-border(0);

        &:hover .overlay {
            height: 100%;
            opacity: 0.9;
        }
    }

    .selected {
        display: none;
        color: $brand-success;

        svg {
            display: block;
            width: 84px;
        }
    }

    .overlay {
        display: flex;
        position: absolute;
        align-items: center;
        justify-content: center;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
        background-color: $brand-primary;
        opacity: 0;
        overflow: hidden;
        transition: all 0.1s;
        text-align: center;
    }

    .buttons {
        display: flex;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
        padding: $spacer * 0.5;
        align-items: center;
        justify-content: center;

        > .btn {
            display: block;
            margin: math.div($spacer, 6) ($spacer * 0.25);
            max-height: $line-height * $font-size-base + ($btn-padding-y * 2) + ($border-width * 2);
            min-width: 96px;
        }
    }

    .label-selector-item {
        position: relative;
    }

    .label-selector-corner-link {
        position: absolute;
        display: block;
        width: 16px;
        top: $spacer * 0.5;
        right: $spacer * 0.5;

        svg {
            display: block;
        }

        a {
            color: $white;

            &:hover {
                color: $navbar-active-link-active-bg;
            }
        }
    }
}

// TODO: these are kinda tweaks, aren't they? Think about it.
// Theme-specific variants

.theme-wrap {
    position: relative;
    margin-bottom: $spacer * 0.5;

    .image-wrap {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        overflow: hidden;
        @include image-wrap-border(0);

        .label-selector-image {
            flex-shrink: 0;
            min-width: 100%;
            min-height: 100%;
        }
    }
}

// Mobile-theme-specific variants

.mobile-theme-wrap {
    position: relative;
    overflow: hidden;
    margin-bottom: $spacer * 0.5;
    color: rgba(85, 90, 98, 0.27);

    .mobile-frame {
        position: relative;
        bottom: 0;
    }

    svg {
        max-width: 100%;
        display: block;
    }

    .image-wrap {
        position: absolute;
        bottom: 0.7%;
        left: 8%;
        width: 84%;
        height: 86%;
        margin-bottom: 0;
        overflow: hidden;
        @include image-wrap-border(0);

        &::after {
            border-bottom: 0;
        }
    }
}

.Homepage .label-selector-item {
    @include grid-item-large();
}

.label-selector-item {
    @include grid-item();
    padding: $spacer $spacer ($spacer * 0.5);
}

.btn-overlay {
    @include button-variant($white, transparent, $white, $white, $navbar-active-link-active-bg, $white);
}

// Search Input
//
// Search inputs have a hidden submit button, a search icon on the input, and a clear button if a search has been
// performed.
//
// PHP rendering: In Gdn_Form, use either searchForm(field, url, [textboxAttributes, info]) to render the entire
// search form or search(field, url, [textboxAttributes, info]) to render the search field.
//
// Markup:
// <form>
//   <div role="search" class="search-wrap">
//     <div class="search-icon-wrap search-icon-search-wrap">
//       <svg class="icon icon-svg icon-svg-search" viewBox="0 0 17 17"><use xlink:href="#search" /></svg>
//     </div>
//     <input class="form-control" />
//     <button type="submit" class="search-submit">Search</button>
//     <div class="search-icon-wrap search-icon-clear-wrap">
//       <svg class="icon icon-svg icon-svg-close" viewBox="0 0 17 17"><use xlink:href="#close" /></svg>
//     </div>
//   </div>
// </form>
//
// Styleguide 5.7.

.search-wrap {
    position: relative;

    .form-control {
        padding-left: $spacer * 2;
        padding-right: $spacer * 2;

        &[placeholder] {
            text-overflow: ellipsis;
        }
    }

    .search-icon-wrap {
        @extend .btn-icon;
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 6px 12px;

        .icon {
            height: 14px;
            width: 14px;
            color: rgba(85, 90, 98, 0.7);
        }

        &:first-child {
            margin-left: 0;
        }

        position: absolute;
        top: 0;
    }

    .search-icon-clear-wrap {
        right: 0;
    }

    .search-icon-search-wrap {
        left: 0;
    }

    .search-info {
        margin-top: $spacer * 0.25;
        font-style: italic;
    }
}

// Hide the button
.search-submit {
    position: absolute;
    left: -9999px;
}

// Suffix Textbox
//
// Text box with a suffix value (useful for units). The suffix pulls from the data-suffix value of a input wrapper div.
//
// Markup:
// <div class="form-group">
//   <div class="label-wrap-wide">
//     <label for="Form_ThumbnailSize">Thumbnail Size</label>
//     <div class="info">Avatars will have their thumbnails saved at this size.</div>
//   </div>
//   <div class="input-wrap-right">
//     <div class="textbox-suffix" data-suffix="px">
//       <input type="text" class="form-control">
//     </div>
//   </div>
// </div>
//
// Styleguide 5.8.

.textbox-suffix {
    position: relative;

    input {
        padding-right: $spacer * 1.5;
        width: $btn-min-width;
        text-align: right;
    }

    &::after {
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        height: $control-height;
        padding-top: ($control-height - $font-size-sm) * 0.5;
        padding-right: $spacer * 0.5;
        font-size: $font-size-sm;
        line-height: 1;
        color: $grey;
        content: attr(data-suffix);
    }
}

// Text Input With Button
//
// Text input with an attached button and optional label.
//
// Markup:
// <div class="text-input-button">
//   <div class="label-wrap">
//     <label for="Form_Label">Label:</label>
//   </div>
//   <input type="text" id="Form_Label" name="Label" value="preview" class="form-control">
//   <button type="submit" id="Form_Apply" name="Apply" class="btn btn-primary btn-apply" value="Apply">
//     Apply
//   </button>
// </div>
//
// Styleguide 5.9.

.text-input-button {
    display: flex;
    flex-grow: 1;
    align-items: center;

    input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .btn {
        margin-left: -$border-width;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .label-wrap {
        flex-shrink: 0;
        display: block;
        margin-right: $spacer * 0.5;

        label {
            line-height: 1;
            margin-bottom: 0;
        }
    }
}

.radio,
.checkbox {
    margin-bottom: 0;
}

.radio + .radio,
.checkbox + .checkbox {
    margin-top: 0; // Override twbs
}

// Checkboxes and Radios
//
// We use either the jquery iCheck library to render our checkboxes or the good ol' checkbox hack. A rule of thumb is
// to use iCheck if the checkbox has a functional label. Use the checkbox hack if there are many checkboxes on the
// page and they don't need visible labels.
//
// The dashboard will render checkboxes using iCheck by default. If you would rather use the checkbox hack, you'll
// need to wrap your checkbox in a `checkbox-painted-wrapper` div and use some very specific markup, as noted in
// Section 5.10.2
//
// Styleguide 5.10.

// Override twbs
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    position: relative;
    margin-top: initial;
    margin-left: initial;
}

@mixin checkbox-painted {
    background-color: $white;
    display: inline-block;
    width: $spacer;
    height: $spacer;
    margin-right: $spacer * 0.25;
    vertical-align: middle;
    border: $border-width solid $border-color;
}

@mixin checkbox-painted-hover {
    background-color: $brand-primary;
    border-color: $brand-primary;

    &::before {
        display: block;
        color: $white;
    }
}

@mixin checkbox-painted-focus {
    box-shadow: 0px 0px 4px 1px $brand-primary;
}

@mixin checkbox-painted-checked {
    @extend %icon;
    font-size: $font-size-sm;
    text-align: center;
    background-color: $brand-primary;
    border-color: $brand-primary;

    &::before {
        display: block;
        margin-top: ($spacer - $font-size-sm) * 0.5 - $border-width;
        color: $white;
        @include char-content($icon-ok);
    }
}

// iCheck
//
// We use iCheck to make our checkboxes and radios look nice. It does some magic wrap the input in a style-able div.
// The most important thing to note is that you cannot listen for the click event, since the click happens on the
// wrapper. Listen for the change event instead.
//
// PHP rendering: This is the default styling for checkbox and radio inputs.
//
// Markup:
// <script>
//   $(document).on('click', '#checkbox-1', function() {console.log('clicked!')}); // doesn't work
//   $(document).on('change', '#checkbox-1', function() {console.log('changed!')});
// </script>
// <label><input id="checkbox-1" type="checkbox" />A label for checkbox 1</label>
//
// Styleguide 5.10.1

// iCheck
.icheck-label {
    padding-left: 0;
}

.iradio,
.icheckbox {
    border-radius: $border-radius;

    label {
        padding-left: 0;
        height: $spacer;
        vertical-align: middle;
    }

    @include checkbox-painted;
    cursor: pointer;

    &:hover,
    &.hover,
    .icheck-label:hover & {
        @include checkbox-painted-hover;
    }

    .icheck-label:focus &,
    &:focus,
    &.focus {
        @include checkbox-painted-focus;
    }

    .column-checkbox & {
        margin: 0;
    }
}

.iradio {
    border-radius: $spacer * 0.5;

    &.checked::before {
        position: absolute;
        display: block;
        top: -$border-width;
        left: -$border-width;
        width: $spacer;
        height: $spacer;
        border: $border-width * 4 solid $brand-primary;
        border-radius: $spacer * 0.5;
        background-color: $white;
        content: "";
    }
}

.icheckbox.checked {
    @include checkbox-painted-checked;
}

label[id^="iCheck"] {
    padding-left: 0;
}

// Checkbox-hack checkboxes
//
// iCheck is nice, but comes with a rather notable blow to performance when there are many checkboxes on a page.
// If this is the case, render your checkboxes this way. No javascript necessary!
//
// PHP rendering: Something like this should work nicely:
// ```
// <?php echo wrap(
//     $form->checkBox(
//         'StringsToAdd[]',
//         val('title', $string),
//         ['display' => 'after']
//     ),
//     'div',
//     ['class' => 'checkbox-painted-wrapper']
// ); ?>
//
// ```
//
// Markup:
// <div class="checkbox-painted-wrapper checkbox">
//   <input type="checkbox" id="CheckMe">
//   <label for="CheckMe">Check Me</label>
// </div>
// <div class="radio-painted-wrapper radio">
//   <input type="radio" id="CheckRadioOne" name="CheckRadio">
//   <label for="CheckRadioOne"></label>
// </div>
// <div class="radio-painted-wrapper radio">
//   <input type="radio" id="CheckRadioTwo" name="CheckRadio">
//   <label for="CheckRadioTwo"></label>
// </div>
//
// Styleguide 5.10.2

.checkbox-painted-wrapper,
.radio-painted-wrapper {
    position: relative;

    label {
        padding-left: 0;

        @include text-hide;
        @include checkbox-painted;

        margin-right: 0;

        &:hover {
            @include checkbox-painted-hover;
        }
    }

    input:focus + label {
        @include checkbox-painted-focus;
    }

    input[type="radio"],
    input[type="checkbox"] {
        margin-left: -9999px;
        position: absolute;
    }
}

.checkbox-painted-wrapper {
    input:checked + label {
        @include checkbox-painted-checked;
    }
}

.radio-painted-wrapper {
    label {
        border-radius: $spacer * 0.5;
    }

    input:checked + label {
        border: $border-width * 4 solid $brand-primary;
        border-radius: $spacer * 0.5;
        background-color: $white;
    }
}

// Spoiler Toggle
//
// Spoilers hide content until you click on them. Usually these are reserved for the front-end,
// but we also use them for sensitive information in the dashboard, like the Access Token.
//
// Here's how to build an anchor toggle.
//
// .spoiler-visible - On state.
//
// Markup:
// <div class="spoiler {{modifier_class}}">
//   <button class="btn btn-primary spoiler-trigger">
//      Your spoiler message here
//   </button>
//   <div class="spoiler-content">
//      Darth Vader is Luke's father! 😲
//   </div>
// </div>
//
// Styleguide 5.10.3

.spoiler-trigger {
    width: 100%;
}

.spoiler-content {
    display: none;
}

.spoiler {
    position: relative;
    min-height: 35px;

    &.spoiler-visible {
        .spoiler-trigger {
            display: none !important;
        }

        .spoiler-content {
            display: block;
        }
    }
}

.label-flex {
    display: flex;
    align-items: center;

    .TinyProgress {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.flex-grow {
    display: flex;
    flex-grow: 1;
}
